<template>
  <el-container>

    <el-main>
      <div>
        <el-card class="box-card">
          <div slot="header" class="clearfix card-header">
            <span>用户信息</span>
            <!--<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>-->
          </div>
          <el-row class="bottom_border">
            <el-col :span="12" :offset="6">
              <el-row>
                <el-col :span="8">头像:</el-col>
                <el-col :span="16">
                  <el-upload
                    class="avatar-uploader"
                    action="#"
                    :show-file-list="false"
                    :on-change="imgPreview"
                    :before-upload="beforeAvatarUpload"
                    :http-request="uploadFile"
                  >
                    <img v-if="imageSrc" :src="imageSrc" class="avatar">
                    <img v-else-if="user.avatar" :src="baseUrl+user.avatar" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon" />
                  </el-upload>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row class="bottom_border">
            <el-col :span="12" :offset="6">
              <el-row>
                <el-col :span="8">账号:</el-col>
                <el-col :span="16"><el-input v-model="user.username" style="width:100%;" :disabled="true" /></el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row class="bottom_border">
            <el-col :span="12" :offset="6">
              <el-row>
                <el-col :span="8">昵称:</el-col>
                <el-col :span="16"><el-input v-model="user.nickname" style="width:100%;" /></el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row class="bottom_border">
            <el-col :span="12" :offset="6">
              <el-row>
                <el-col :span="8">邮箱:</el-col>
                <el-col :span="16"><el-input v-model="user.email" style="width:100%;" /></el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row class="bottom_border">
            <el-col :span="12" :offset="6">
              <el-row>
                <el-col :span="8">启用:</el-col>
                <el-col :span="16">{{ user.enabled ? '是':'否' }}</el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row class="bottom_border">
            <el-col :span="12" :offset="6">
              <el-row>
                <el-col :span="8">&nbsp;</el-col>
                <el-col :span="16">
                  <el-button type="primary" @click="updateUserClick">提交修改</el-button>
                </el-col>
              </el-row>
            </el-col>
          </el-row>

        </el-card>

      </div>
    </el-main>
  </el-container>
</template>
<script>
import request from '@/utils/request'
import { getBase64 } from '@/utils/file'
export default {
  data: function() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      imageSrc: '',
      conditions: [
        {
          field: 'tskstat',
          type: 'STRING',
          value: '',
          symbol: 'EQ'
        }
      ],
      page: {
        current: 1,
        size: 5,
        total: 0
      },
      user: []
    }
  },
  computed: {
    key_logic: function() {
      const { logic = {}} = this.$store.state.directory.directoryItem
      return logic
    }
  },
  created() {
    this.directoryUpdate()
    this.query()
  },
  methods: {
    uploadFile: function(content) {
      const file = content.file
      const params = new FormData() // 创建form对象
      params.append('file', file) // 通过append向form对象添加数据//第一个参数字符串可以填任意命名，第二个根据对象属性来找到file
      params.append('fileName', this.user.username)
      params.append('filePath', 'avatar')
      const self = this
      const config = {
        headers: { // 添加请求头
          'Content-Type': 'multipart/form-data',
          'X-token': self.$store.state.user.token
        }
      }
      const url = process.env.VUE_APP_BASE_API + '/upload/fileUpload'
      self.$progress.start()
      this.$http.post(url, params, config).then(res => {
        this.$progress.done()
        if (res.data.result) {
          self.user.avatar = res.data.data.url
          self.user.filepath = res.data.data.filePath
          self.user.size = res.data.data.size
          // 清除文件列表
          // self.$refs.upload.clearFiles()
        } else {
          self.$message.error(res.data.msg)
        }
      }).catch(() => { self.$progress.done() })
    },
    beforeAvatarUpload(file) {
      const isJPG = (file.type === 'image/jpeg')
      const isPNG = (file.type === 'image/png')
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 5MB!')
      }
      const isImage = isJPG || isPNG
      if (!isImage) {
        this.$message.error('上传头像图片只能是 PNG/JPG 格式!')
      }
      const next = isImage && isLt2M
      return next
    },
    // 图片预览
    imgPreview: function(file, fileList) {
      const fileName = file.name
      const regex = /(.jpg|.jpeg|.gif|.png|.bmp)$/
      if (regex.test(fileName.toLowerCase())) {
        const self = this
        getBase64(file.raw).then(res => {
          self.imageSrc = res
        })
      } else {
        this.$message.error('不是图片类型!')
      }
    },
    directoryUpdate: function() {
      this.$store.commit('directory/setDirectory', 'logic')
    },
    // 转到详细任务信息
    toTask: function(row) {
      this.$router.push({ name: '任务处理', params: row })
    },
    updateUserClick: function() {
      this.updateUserTask()
    },
    updateUserTask: function() {
      this.$progress.start()
      this.page.conditions = this.conditions
      request({
        url: '/system/userManager/edit',
        method: 'post',
        data: this.user
      }).then(res => {
        this.$progress.done()
        if (res.result) {
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => { this.$progress.done() })
    },
    query: function() {
      this.$progress.start()
      this.page.conditions = this.conditions
      request({
        url: '/system/userManager/getUserInfo',
        method: 'post',
        data: this.page
      }).then(res => {
        this.$progress.done()
        if (res.result) {
          this.user = res.data
        } else {
          this.$message.error(res.msg)
        }
      }).catch(() => { this.$progress.done() })
    }
  }
}
</script>
<style>
  .bottom_border {
      border-bottom: solid 1px #cccccc4d;
  }
  .el-card__header {
    background-color: #a6abc1;
    color: white;
  }
  .card-header {
    background-color: #a6abc1;
    color: white;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 75px;
    height: 75px;
    line-height: 75px;
    text-align: center;
  }
  .avatar {
    width: 75px;
    height: 75px;
    display: block;
  }
  .el-row {
    margin-bottom: 20px;
    line-height:36px;
    &:last-child {
       margin-bottom: 0;
     }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
